import React from 'react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { message, Modal, Form, Input } from 'antd';
import './index.local.sass';
import * as headerApi from '~/apis/header/headerApi';

export const FeedbackModal = observer((props: any) => {
  const state = props.state;

  const [form] = Form.useForm();

  // 意见反馈
  const onFeedOk = action(() => {
    form.validateFields().then((values) => {
      const params = {
        content: values.feedback,
      };

      headerApi.feedBack(params).then(() => {
        message.success('Send success');
        state.visible = false;
      }).catch(() => {
        message.error('Send fail');
      });
    });
  });

  const onFeedCancel = () => {
    state.visible = false;
  };

  return (
    <Modal
      visible={state.visible}
      title='Feedback'
      okText="Send"
      cancelText="Cancel"
      onCancel={onFeedCancel}
      onOk={onFeedOk}
    >
      <Form form={form}>
        <Form.Item
          name="feedback"
          rules={[{ required: true, message: 'Feedback is required' }]}
        >
          <Input.TextArea allowClear placeholder="Feedback" rows={10} />
        </Form.Item>
      </Form>
    </Modal>
  );
});
